<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 需求：数据按照顺序排列 -->
  <!-- 数据排序建议不要再原数据上进行操作，重新定义一个新值进行接收 -->

  <div id="app">
    <button @click="order=1">年龄升序</button>
    <button @click="order=2">年龄降序</button>

    <!-- 对数据进行遍历 -->
    <ul>
      <li v-for="item in newPerson" :key="item.id">
        {{item.name}}--{{item.age}}
      </li>
    </ul>

  </div>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#app",
      data() {
        return {
          age: 0,
          person: [
            { id: "001", name: "lucy", age: 22 },
            { id: "002", name: "lili", age: 12 },
            { id: "003", name: "yuehan", age: 31 },
            { id: "004", name: "liming", age: 18 },
            { id: "005", name: "xiaowang", age: 4 },
            { id: "006", name: "zhangsan", age: 19 },
            { id: "007", name: "wangwu", age: 40 },
          ],
          order: 0
        };
      },
      
      computed:{
        newPerson(){
          // 对数据先过滤满足条件的 数据，然后再排序
          let filterPer = this.person.filter((item)=>{
            return item.age > this.age
          })

          if(this.order == 1){
            return filterPer.sort((a,b)=>{
              return a.age - b.age
            })
          }
          if(this.order == 2){
            return filterPer.sort((a,b)=>{
              return b.age - a.age
            })
          }
          // filterPer.sort((a,b)=>{
          //   if(this.order==1){
          //     return a.age - b.age
          //   }else{
          //     return b.age - a.age
          //   }
          //   console.log(123);
          // })

        }
      }


    });
  </script>
</body>

</html>